<template>
    <div class="info" v-if="listData.teacher" >
        <img style="width:71px;height:71px;border-radius: 50%;margin-right:5px"
            :src="listData.teacher.avatar" alt />
        <div class="info-tit">
            <p>
                <span style="font-size:16px"></span>
                <span style="color:#EA7A2F">{{listData.teacher.real_name}}</span>
            </p>
            <p v-if="listData.sex == 0" style="color:#999">男 {{listData.teach_age}}年教龄</p>
            <p v-else style="color:#999">女 {{listData.teach_age}}年教龄</p>
        </div>
        <div class="guan" @click="attenFun(listData.teacher.id)">{{listData.flag == 1 ?'取消关注':'关注'}}</div>
    </div>
</template>

<script>
export default {
    props: ['listData'],
    data() {
        return {

        };
    },
    methods: {
        attenFun(iid) {

            this.$emit('attenFun',iid)
        }
    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
.info {
    width: 96vw;
    height: 144px;
    padding: 18px;
    background: #fff;
    position: absolute;
    top: 63px;
    left: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 20px;

    .info-tit {
        width: 500px;
        display: flex;
        flex-direction: column;

        p {
            margin: 3px 0;
        }
    }

    .guan {
        min-width: 62px;
        height: 35px;
        border-radius: 18px;
        padding: 0 10px;
        background: #f4f4f4;
        text-align: center;
        line-height: 35px;
    }
}
</style>
